<template>
  <div class="parkMessage">
    <div class="parkMessage-content">
      <div class="left-box">
        <el-form
          width="100%"
          ref="form"
          :model="form"
          label-position="top"
          label-width="80px"
        >
          <el-form-item label="车位名：">
            <el-input
              v-model="form.parkname"
              placeholder="请输入车位名"
            ></el-input>
          </el-form-item>
          <el-form-item label="车位金额：">
            <el-input
              v-model="form.parkpay"
              placeholder="请输入车位金额"
            ></el-input>
          </el-form-item>
          <el-form-item label="车位类型">
            <el-select v-model="form.parktype" placeholder="请选择车位类型">
              <el-option label="地下" value="1"></el-option>
              <el-option label="地上" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="车位状态">
            <el-select v-model="form.parkstatus" placeholder="请选择车位状态">
              <el-option label="已有车" value="1"></el-option>
              <el-option label="未有车" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="right-box">
        <div class="table-box">
          <h1 class="title">车位列表</h1>
          <el-button type="success" class="success-button" @click="addParking"
            ><i class="el-icon-plus"></i>新增</el-button
          >
          <div class="clearfix"></div>
        </div>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column
            fixed
            prop="date"
            label="序号"
            type="index"
            width="70"
          >
          </el-table-column>
          <el-table-column
            prop="parkname"
            label="车位名称"
            width="200"
          ></el-table-column>
          <el-table-column
            prop="parkpay"
            label="车位金额"
            width="180"
          ></el-table-column>
          <el-table-column label="车位类型" width="195">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.parktype"
                @change="changeParkType(scope.row)"
                active-text="地上"
                inactive-text="地下"
                :active-value="2"
                :inactive-value="1"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="车位状态" width="195">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.parkstatus"
                @change="changeParkStatus(scope.row)"
                active-text="已有车"
                inactive-text="未有车"
                :active-value="1"
                :inactive-value="2"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="280">
            <template slot-scope="scope">
              <el-button
                class="table-operation"
                :disabled="scope.row.parkstatus == 1"
                @click="assignParkingSpot(scope.row)"
                size="mini"
                ><i class="el-icon-share"></i>分配车位</el-button
              >
              <el-button
                class="table-operation"
                @click="editParkingSpot(scope.row)"
                size="mini"
                ><i class="el-icon-edit"></i>编辑</el-button
              >
              <el-button
                class="table-operation"
                @click="removeParkingSpot(scope.row.id)"
                size="mini"
                ><i class="el-icon-delete"></i>移除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>

    <!-- 新增/编辑模太框 -->
    <el-dialog
      :title="this.editForm.u_id ? '编辑车位' : '新增车位'"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
    >
      <el-form
        :model="editForm"
        ref="ruleForm"
        label-width="80px"
        class="demo-ruleForm"
      >
        <el-form-item label="车位名称" prop="parkname">
          <el-input v-model="editForm.parkname"></el-input>
        </el-form-item>
        <el-form-item label="车位金额" prop="parkpay">
          <el-input v-model="editForm.parkpay"></el-input>
        </el-form-item>
        <el-form-item label="车位类型" prop="parkaddress">
          <el-select v-model="editForm.parktype" placeholder="请选择">
            <el-option label="地下" value="1"></el-option>
            <el-option label="地上" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车位状态" prop="parkstatus">
          <el-select v-model="editForm.parkstatus" placeholder="请选择">
            <el-option label="已有车" value="1"></el-option>
            <el-option label="未有车" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="submitForm">重 置</el-button>
        <el-button type="primary" v-if="!this.editForm.u_id" @click="addmessage"
          >提 交</el-button
        >
        <el-button type="primary" v-else @click="edint">编 辑</el-button>
      </span>
    </el-dialog>

    <!-- 左侧弹出框 -->
    <div style="display: flex; margin-top: 20px">
      <transition name="el-fade-in-linear">
        <div v-show="show" class="transition-box">
          <div class="transition-box-header">
            <span class="transition-box-title">车位分配</span>
            <el-button type="text" @click="show = !show">X</el-button>
          </div>
          <el-table
            :data="formLabelData"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <!-- 勾选框 -->

            <el-table-column type="selection" width="55"></el-table-column>
            <!-- 序号 -->
            <el-table-column
              type="index"
              width="50"
              label="序号"
            ></el-table-column>
            <el-table-column
              prop="username"
              label="用户账号"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="homeaddress"
              label="家庭地址"
            ></el-table-column>
            <el-table-column prop="type" label="类型">
              <template slot-scope="scope">
                <span v-if="scope.row.type === 1">管理员</span>
                <span v-else>普通用户</span>
              </template>
            </el-table-column>
            <el-table-column prop="parkname" label="车位"></el-table-column>
          </el-table>
          <el-button type="primary" @click="show = !show">取消</el-button>
          <el-button @click="getassignParkingSpot">确定</el-button>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 左边弹出框表单对象
      formLabelData: [],
      dialogVisible: false,
      show: false,
      total: 0,
      form: {
        parkname: "",
        parkpay: "",
        parktype: "",
        parkstatus: "",
        currPage: 1,
        pageNum: 9,
      },
      editForm: {
        // 新增的编辑表单数据对象
        parkname: "",
        parkpay: "",
        parktype: "",
        parkstatus: "",
        u_id: "",
      },
      last: "",
      tableData: [], // 改为数组类型
      handselect: [],
    };
  },
  methods: {
    // 左边弹出框里面的内容写接口做更新
    // async assignParkingSpot(row) {
    //   console.log(row);
    //   this.show = !this.show;
    //   // this.$message.success("车位分配成功");
    // },

    handleSelectionChange(val) {
      console.log(val);

      //
      const abb = val.map((item) => ({
        u_id: item.id,
        parkId: item.parkId,
        parkname: item.parkname,
        parkstatus: item.parkstatus,
      }));
      this.handselect = abb[0];
      console.log(this.handselect);
    },
    // 左边弹出框添加车位
    async getassignParkingSpot() {
      try {
        const response = await this.axios.post(
          `users/updateParkStatus?u_id=${this.handselect.u_id}&parkId=${
            this.handselect.parkId
          }&parkname=${this.handselect.parkname}&parkstatus=${
            this.handselect.parkstatus
          }&token=${sessionStorage.getItem("token")}`,
          {
            u_id: this.handselect.u_id,
            parkId: this.handselect.parkId,
            parkname: this.handselect.parkname,
            parkstatus: this.handselect.parkstatus,
            token: sessionStorage.getItem("token"),
          }
        );
        this.edit();
        this.dialogVisible = false;
        this.show = !this.show;
        if (response.data) {
          this.$message.success("车位信息添加成功");
        } else {
          this.$message.error("车位信息添加失败");
        }
      } catch (error) {
        console.error(error);
        this.$message.error("请求失败: " + error.message);
      }
    },
    async edit() {
      console.log(this.handselect);
      this.axios
        .post(
          `parking/editParkData?u_id=${this.last.id}&parkname=${this.last.parkname}&parkpay=${this.last.parkpay}&parktype=${this.last.parktype}&parkstatus=1&token=${sessionStorage.token}`,
          {
            u_id: this.last.id,
            parkname: this.last.parkname,
            parkpay: this.last.parkpay,
            parktype: this.last.parktype,
            parkstatus: 1,
            token: sessionStorage.token,
          }
        )
        .then((response) => {
          console.log(response);
          this.$message.success("修改成功");
          this.submitForm();
          this.dialogVisible = false;
          // this.getParkingSpots();
          this.getParkList();
        });
    },
    // 分页器
    handleSizeChange(val) {
      this.form.pageNum = val;
      this.getParkList();
    },
    handleCurrentChange(val) {
      this.form.currPage = val;
      this.getParkList();
    },

    // 左边弹出框
    async getmessage() {
      try {
        const response = await this.axios.get(
          "users/getUsersData?pageNum=" +
            this.form.pageNum +
            "&currPage=" +
            this.form.currPage,
          this.form.currPage,
          this.form.pageNum
        );
        console.log(response.data);
        this.formLabelData = response.data.data;
        this.total = response.data.total;
        if (response.data) {
          this.$message.success("车位信息添加成功");
          this.submitForm();
        } else {
          this.$message.error("车位信息添加失败");
        }
      } catch (error) {
        console.error(error);
        this.$message.error("请求失败: " + error.message);
      }
    },
    // 添加接口
    async addmessage() {
      this.dialogVisible = false;
      try {
        const response = await this.axios.post(
          `parking/addParkData?parkname=${this.editForm.parkname}&parkpay=${this.editForm.parkpay}&parktype=${this.editForm.parktype}&parkstatus=${this.editForm.parkstatus}&token=${sessionStorage.token}`,
          {
            parkname: this.editForm.parkname,
            parkpay: this.editForm.parkpay,
            parktype: this.editForm.parktype,
            parkstatus: this.editForm.parkstatus,
            token: sessionStorage.token,
          }
        );
        if (response.data) {
          this.$message.success("车位信息添加成功");
          this.submitForm();
        } else {
          this.$message.error("车位信息添加失败");
        }
      } catch (error) {
        console.error(error);
        this.$message.error("请求失败: " + error.message);
      }
    },
    // 取消添加
    closeDialog() {
      this.dialogVisible = false;
      this.submitForm();
    },

    submitForm() {
      this.editForm.parkname = "";
      this.editForm.parkpay = "";
      this.editForm.parktype = "";
      this.editForm.parkstatus = "";
      this.editForm.u_id = "";
    },
    addParking() {
      // 打开模态框
      this.dialogVisible = true;
    },
    // 关闭模太框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((done) => {
          done();
        })
        .catch(() => {
          // catch 也可以调用 done
          done();
        });
    },
    assignParkingSpot(row) {
      this.show = true;
      console.log("分配车位:", row);
      this.last = row;
      console.log(this.last);

      // 实现分配车位的逻辑
    },
    editParkingSpot(row) {
      console.log("编辑车位:", row);
      this.dialogVisible = true;
      this.editForm.parkname = row.parkname;
      this.editForm.parkpay = row.parkpay;
      this.editForm.parktype = row.parktype;
      this.editForm.parkstatus = row.parkstatus;
      this.editForm.u_id = row.id;
    },
    // 编辑接口
    edint() {
      this.axios
        .post(
          `parking/editParkData?u_id=${this.editForm.u_id}&parkname=${this.editForm.parkname}&parkpay=${this.editForm.parkpay}&parktype=${this.editForm.parktype}&parkstatus=${this.editForm.parkstatus}&token=${sessionStorage.token}`,
          {
            u_id: this.editForm.u_id,
            parkname: this.editForm.parkname,
            parkpay: this.editForm.parkpay,
            parktype: this.editForm.parktype,
            parkstatus: this.editForm.parkstatus,
            token: sessionStorage.token,
          }
        )
        .then((response) => {
          console.log(response);
          this.$message.success("修改成功");
          this.submitForm();
          this.dialogVisible = false;
          // this.getParkingSpots();
          this.getParkList();
        });
    },
    // 删除接口
    async removeParkingSpot(id) {
      try {
        await this.$confirm("确定删除该车位吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });

        const res = await this.axios.get(`parking/delParkData?id=${id}`);
        console.log(res);

        this.$message({
          type: "success",
          message: "删除成功!",
        });

        this.getParkList();
      } catch (error) {
        if (error) {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        } else {
          console.error(error);
          this.$message.error("请求失败: " + error.message);
        }
      }
    },
    onSubmit() {
      console.log("submit!", this.form);
      this.getParkList(); // 提交后调用获取数据的方法
    },
    handleReset() {
      this.form = {
        parkname: "",
        parkpay: "",
        parktype: "",
        parkstatus: "",
        currPage: 0,
        pageNum: 9,
      }; // 重置表单
      this.getParkList(); //重置表单再调用一次获取数据
    },
    async changeParkStatus(row) {
      console.log(row);

      try {
        // 构建请求数据
        // 更新数据库中的车位状态
        const response = await this.axios.post(
          `parking/editParkData?u_id=${row.id}&parkname=${row.parkname}&parkpay=${row.parkpay}&parktype=${row.parktype}&parkstatus=${row.parkstatus}&token=${sessionStorage.token}`,
          {
            u_id: row.id,
            parkname: row.parkname,
            parkpay: row.parkpay,
            parktype: row.parktype,
            parkstatus: row.parkstatus,
            token: sessionStorage.token,
          }
        );
        if (response.data == "修改成功") {
          this.$message.success("车位状态更新成功");
          this.getParkList();
        } else {
          this.$message.error("车位状态更新失败");
        }
      } catch (error) {
        console.error(error);
        this.$message.error("请求失败: " + error.message);
      }
    },
    async changeParkType(row) {
      console.log(row);

      try {
        // 构建请求数据
        // 更新数据库中的车位状态
        const response = await this.axios.post(
          `parking/editParkData?u_id=${row.id}&parkname=${row.parkname}&parkpay=${row.parkpay}&parktype=${row.parktype}&parkstatus=${row.parkstatus}&token=${sessionStorage.token}`,
          {
            u_id: row.id,
            parkname: row.parkname,
            parkpay: row.parkpay,
            parktype: row.parktype,
            parkstatus: row.parkstatus,
            token: sessionStorage.token,
          }
        );
        if (response.data == "修改成功") {
          this.$message.success("车位状态更新成功");
          this.getParkList();
        } else {
          this.$message.error("车位状态更新失败");
        }
      } catch (error) {
        console.error(error);
        this.$message.error("请求失败: " + error.message);
      }
    },
    async getParkList() {
      try {
        const { data: res } = await this.axios.get("parking/getParkData", {
          params: this.form,
        });
        console.log(res);
        this.tableData = res.data;
        this.total = res.total;
      } catch (error) {
        console.error(error);
        this.$message.error("请求失败: " + error.message);
      }
    },
  },
  mounted() {
    this.getParkList();
    this.getmessage();
  },
};
</script>


<style scoped lang="scss">
// .table-operation {
//   width: 23% !important;
//   font-size: 12px !important;
// }
.block {
  text-align: right;
  margin-top: 20px;
}
.success-button[data-v-5956b006] {
  float: right;
  width: 8%;
}
.table-box {
  margin-top: 45px;
}
form {
  width: 100%;
}
::v-deep .el-form-item {
  margin-bottom: 22px;
  margin-top: 22px;
}
// .el-button {
//   width: 45%;
//   font-size: 14px;
// }
::v-deep .el-input__inner {
  height: 36px;
  line-height: 36px;
}
.parkMessage-content {
  display: flex;
  margin: 1.3% 1%;
  background-color: #fff;
  height: 100%;
}
.left-box {
  width: 351px;
  height: 580px;
  padding: 20px;
  box-sizing: border-box;
}
.right-box {
  width: 1150px;
}
.parkMessage {
  background-color: #fff;
  margin: 1.3% 1%;
  margin-left: 0;
  height: calc(100% - 56px);
}
::v-deep .el-table .el-table__cell {
  padding: 9px 0;
}
.title {
  float: left;
  margin: 0;
}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
::v-deep .el-table td.el-table__cell {
  border-bottom: 1px solid #ebeef5;
  text-align: center !important;
}
::v-deep .el-table th.el-table__cell.is-leaf {
  text-align: center;
}

// 左侧弹出框
.transition-box[data-v-5956b006] {
  margin-bottom: 10px;
  width: 50%;
  height: 100%;
  /* height: 97px; */
  position: fixed;
  top: 56px;
  z-index: 10;
  border-radius: 4px;
  background-color: #ffffff;
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin-right: 20px;
}
</style>
